/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 14:12:13
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-26 19:00:02
 * @FilePath: /umi/src/components/xh-components/xh-modal/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useRef } from "react";
import Draggable from "react-draggable";
import { connect, useDispatch, history } from "umi";
import { Button, Modal } from "antd";
const XHmodal = (props) => {
  const [disabled, setDisabled] = useState(true);

  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });

  const draggleRef = useRef(null);

  const {
    width = 600,
    body,
    title = "新增",
    noText = "取消",
    okText = "保存",
    open = false,
    ok,
    no,
    loading = false,
    isBtn = true,
  } = props;

  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <Modal
      title={
        <div
          style={{
            width: "100%",
            cursor: "move",
          }}
          onMouseOver={() => {
            if (disabled) {
              setDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDisabled(true);
          }}
          // fix eslintjsx-a11y/mouse-events-have-key-events
          // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
          onFocus={() => {}}
          onBlur={() => {}}
          // end
        >
          {title}
        </div>
      }
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          nodeRef={draggleRef}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      destroyOnClose
      width={width}
      open={open}
      onOk={ok}
      onCancel={no}
      footer={(_, { OkBtn, CancelBtn }) =>
        title != "查看" && isBtn ? (
          <>
            <Button onClick={no}>{noText}</Button>
            <Button type="primary" onClick={ok} loading={loading}>
              {okText}
            </Button>
          </>
        ) : (
          ""
        )
      }
    >
      {body}
    </Modal>
  );
};
export default XHmodal;
